<script setup>
import { config } from "@/config";
import { get } from "@/request/request";
import { onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
// const searchValue = ref("");
const distUsers = ref({});

onShow(() => {
  distUser();
});

const distUser = () => {
  get("/dist_users", null, {
    sessionKey: uni.getStorageSync("sessionKey"),
  }).then((res) => {
    const { data } = res;
    console.log("dist_users", data);
    distUsers.value = data;
  });
};
</script>
<template>
  <view class="Outreach">
    <view class="top-box"></view>
    <view class="person-box">
      <view class="person-title">推广人</view>
      <view class="person">
        <view style="font-size: 56rpx; color: #0052d9">{{ distUsers.length }}</view>
        <view style="text-align: center">
          <view style="color: #0052d9">0</view>
          <view style="font-size: 24rpx">订单</view>
        </view>
      </view>
    </view>
    <view class="members-box">
      <!-- <view class="input-box">
        <input
          class="inut"
          type="text"
          v-model="searchValue"
          placeholder="搜索会员名称"
          placeholder-class="input-placeholder"
          @input="" />
      </view> -->
      <template v-for="(item, index) in distUsers" :key="index">
        <view class="members">
          <image class="img" :src="config.baseUrl + '/file/' + item.avatar" />
          <view class="name-box">
            <view>{{ item.nickname }}</view>
            <view>{{ item.createTime }}</view>
          </view>
          <view class="order-box">
            <view class="order">订单：{{ item.order }}</view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<style scoped lang="scss">
.Outreach {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .top-box {
    width: 100%;
    height: 240rpx;
    background: #0052d9;
  }

  .person-box {
    margin-top: -200rpx;
    width: 686rpx;
    height: 184rpx;
    background: #fff;
    border-radius: 18rpx;
    padding: 20rpx;

    .person-title {
      font-size: 32rpx;
    }

    .person {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }

  .members-box {
    margin-top: 50rpx;
    width: 686rpx;
    height: 1080rpx;
    background: #fff;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    flex-direction: column;

    // .input-box {
    //   padding: 20rpx;

    //   .inut {
    //     width: 622rpx;
    //     height: 80rpx;
    //     background: rgba(243, 243, 243, 1);
    //     border-radius: 40rpx;
    //     padding: 20rpx;
    //     line-height: 40rpx;
    //   }
    // }

    .members {
      margin-top: 20rpx;
      width: 100%;
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      // flex-direction: column;

      .img {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
      }

      .name-box {
        width: 318rpx;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }

      .order-box {
        width: 120rpx;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .order {
          width: 120rpx;
          height: 48rpx;
          background: rgba(243, 243, 243, 1);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 6rpx;
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.9);
        }
      }
    }
  }
}
</style>
